import { use, useEffect, useState } from "react"

const ExitComponent = (props: any) => {
    const {handler} = props
    const [list, setList] = useState([
        { id: 1, name: 'aaaa' },
        { id: 2, name: 'bbbb' },
        { id: 3, name: 'cccc' },
    ])
    const [num, setNum] = useState(0)
    const doubleNum =
        num * 2

    const addNum = () => {
        setNum(num + 1)
        const newItem = { id: list.length + 1, name: '111' }
        setList([...list, newItem])
        
        handler(input)
        setInput('')
    }
    const del = (id: number) => {
        console.log(id)
    }
    // 输入框
    const [input, setInput] = useState('')
    const changeInput = (e:any) => {
        setInput(e.target.value)
    }
    useEffect(() => {
        console.log('num')
    }, [num])
    useEffect(() => {
        return () => {
            console.log('销毁')
        }
    })
    return (
        <>
            <div style={{ border: "1px solid red" }}>
                <p>外部组件</p>
                <ul>
                    {list.map((item) => {
                        return <li key={item.id} onClick={() => { del(item.id) }}>
                            <p>{item.name}</p>
                        </li>
                    })}
                </ul>
                <button onClick={addNum}>添加</button>
                <p>{num}</p>
                <p>{doubleNum}</p>
                <input value={input} placeholder="请输入" onChange={changeInput
                }></input>
        </div >
        </>
    )
}

export default ExitComponent
